/**
基础页面设计：
包含：搜索表单、table表格、详情弹窗
搜索表单：searchData,二维数组
searchData:
[
  [ // 一行数据
    {
      title: "用户名",
      type: "input",
      pro: "userName",
      //type 为select时可用
      multiple: true,
      data: [
        {value:"",label:""}
      ],
    }
  ]
]

table表格 tableColumn
tableColumn:{
  columns: [
    { prop: "属性名", label: "标题名" },
  ],
  operation: {
    state: true,
    defs: [
    // { name: "编辑", event: "edit" },
    // { name: "详情", event: "detail" },
    ],
  },
}
 */
<template>
  <!-- 查询 -->
  <div>
    <el-form :inline="true" :model="searchFormData.data">
      <el-row :gutter="20" v-for="(item,index) in basepage.searchConf" :key="index">
        <el-col :span="6" v-for="(data,i) in item" :key="i">
          <template v-if="data.type === 'input'">
            <el-form-item :label="data.title">
              <el-input v-model="searchFormData.data[data.prop]" :placeholder="data.title"></el-input>
            </el-form-item>
          </template>
          <template v-if="data.type === 'select'">
            <el-form-item :label="data.title">
              <el-select
                v-model="searchFormData.data[data.prop]"
                filterable
                :placeholder="data.title"
                :multiple="data.multiple"
                @change="selectChange('search',data.prop)"
              >
                <el-option
                  v-for="each in data.data"
                  :key="each.value"
                  :label="each.label"
                  :value="each.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </template>
        </el-col>
      </el-row>
    </el-form>
    <el-row>
      <el-col>
        <el-button type="primary" @click="select">查找</el-button>
        <el-button type="info" @click="resetSearch">重置</el-button>
        <el-button
          type="success"
          @click="insertOne"
          v-if="basepage.buttonConf.insertShow === true"
        >新增</el-button>
        <el-button type="danger" @click="deleteSelection" v-if="basepage.buttonConf.deleteShow">删除</el-button>
        <slot name="button"></slot>
      </el-col>
    </el-row>

    <!-- 表格 -->
    <el-table
      ref="table"
      :data="tableData"
      border
      :header-cell-style="{ textAlign: 'center' }"
      style="width: 100%"
      height="450"
      :row-style="{ height: '5' }"
      :cell-style="{ padding: '8px 0' }"
      highlight-current-row
      @current-change="handleCurrentChange"
    >
    <slot name="table"></slot>
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column type="index" width="50" label="序号" align="center"></el-table-column>
      <el-table-column
        v-for="(item,index) in basepage.tableColumnConf.columns"
        :key="index"
        :prop="item.prop"
        :label="item.label"
        align="center"
        height="500"
        :formatter="formatter"
      ></el-table-column>
      // 定义操作
      <el-table-column
        v-if="basepage.tableColumnConf.operation.state == true"
        fixed="right"
        label="操作"
        width="100"
      >
        <template slot-scope="scope">
          <el-button
            v-for="(def,index) in basepage.tableColumnConf.operation.defs"
            :key="index"
            @click="operation(scope.row,def.event)"
            type="text"
            size="small"
          >{{def.name}}</el-button>
          <el-button @click="detail(scope.row)" type="text" size="small" v-if = "basepage.tableColumnConf.operation.detail === undefined || basepage.tableColumnConf.operation.detail === true">详情</el-button>
          <el-button @click="alter(scope.row)" type="text" size="small" v-if = "basepage.tableColumnConf.operation.alter === undefined || basepage.tableColumnConf.operation.alter === true">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 页面分页栏 -->
    <el-pagination
      layout="total,prev, pager, next"
      :total="total"
      :current-page.sync="searchFormData.pageOn"
      @current-change="currentChange"
      @prev-click="prev"
      @next-click="next"
      :page-size="10"
      width="100"
      align="center"
    ></el-pagination>
    <!-- 详情 -->
    <el-dialog
      v-dialogDrag
      :visible.sync="detailDialogVisible"
      :width="basepage.detailConf.width"
      append-to-body
      center
    >
      <el-descriptions :title="basepage.detailConf.title" :column="basepage.detailConf.column">
        <el-descriptions-item
          v-for="(item,index) in basepage.tableColumnConf.columns"
          :key="index"
          :label="item.label"
        >{{formatterDetail(detailData[item.prop],item.prop)}}</el-descriptions-item>
        <el-descriptions-item
          v-for="(item,index) in basepage.detailConf.data"
          :key="index"
          :label="item.label"
        >{{formatterDetail(detailData[item.prop],item.prop)}}</el-descriptions-item>
      </el-descriptions>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 新增、修改 -->
    <template >
      <el-dialog
        v-dialogDrag
        :visible.sync="insertEditVisible"
        :width="basepage.formConf.width"
        append-to-body
        center
        :title="basepage.formConf.title"
        
      >
        <el-form
          :inline="true"
          :model="basepage.formConf.formData"
          class="demo-form-inline"
          :rules="basepage.formConf.rules"
          style="height : 350px;overflow:auto"
        >
          <el-form-item
            v-for="(item,index) in basepage.formConf.data"
            :key="index"
            :label="item.title"
            :prop="item.prop"
            label-width="100px"
            v-if="item.show == true || item.show === undefined"
          >
            <template v-if="item.type === 'input'">
              <el-input v-model="basepage.formConf.formData[item.prop]" :placeholder="item.title"></el-input>
            </template>
            <template v-if="item.type === 'select'">
              <el-select
                v-model="basepage.formConf.formData[item.prop]"
                filterable
                :placeholder="item.title"
                :multiple="item.multiple"
                @change="selectChange('insertEdit',item.prop)"
              >
                <el-option
                  v-for="each in item.data"
                  :key="each.value"
                  :label="each.label"
                  :value="each.value"
                ></el-option>
              </el-select>
            </template>
          </el-form-item>
          <slot name="insertAndEdit"/>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button @click="reset" v-if="insertORedit === 'edit'">重 置</el-button>
          <el-button type="primary" @click="define">确 定</el-button>
        </span>
      </el-dialog>
    </template>
  </div>
</template>
  </div>
</template>
<script>
export default {
  props: {
    basepage: {
      type: Object,
    },
  },
  data() {
    return {
      // table获取值
      tableData: [],
      total: 0,
      // 查询form表单
      searchFormData: {
        pageOn: 1,
        pageSize: 10,
        orderBy:"create_time",
        data: {},
      },
      // 点前选中值
      currentRow: undefined,
      // 详情对话框
      detailDialogVisible: false,
      // 新增修改对话框
      insertEditVisible: false,
      // 详细信息展示界面值
      detailData: {},
      // 新增或者修改标记
      insertORedit: "",
    };
  },
  methods: {
    detail(row) {
      
      this.detailData = row;
      this.detailDialogVisible = true;
      this.$parent.event("detail",this.detailData);
    },
    setDetail(val){
      this.detailData = val;
    },
    setFormData(val){
      this.basepage.formConf.formData = val;
    },
    alter(row) {
      this.insertEditVisible = true;
      this.basepage.formConf.formData = JSON.parse(JSON.stringify(row));
      this.insertORedit = "edit";
      this.basepage.formConf.title = "修改";
      this.$parent.event("edit-before", row);
    },
    insertOne() {
      this.insertEditVisible = true;
      this.insertORedit = "insert";
      this.basepage.formConf.title = "新增";
      this.basepage.formConf.formData = {};
      this.$parent.event("insert-before",{});
    },
    deleteSelection() {
      var selection = this.getSelection();
      if (selection.length == 0) {
        this.$message({
          message: "请至少选中一行",
          type: "warning",
        });
        return;
      }
      this.COMMON.httpPost(
        this,
        this.basepage.url + "/deletes",
        selection,
        (result) => {
          if (result.result === "SUCCESS") {
            this.getPage();
          }
        },
        (result) => {}
      );
    },
    // 分页获取
    getPage() {
      this.COMMON.httpPost(
        this,
        this.basepage.url + "/getPage",
        this.searchFormData,
        (result) => {
          if (result.result === "SUCCESS") {
            this.tableData = result.list;
            this.total = result.total;
          }
        },
        (result) => {}
      );
    },
    // 点击上一页调用
    prev(val) {
      console.log(val);
    },
    // 点击下一页调用
    next(val) {
      console.log(val);
    },
    // 当前页码修改时调用
    currentChange(val) {
      this.searchFormData.pageOn = val;
      this.getPage();
    },
    // 插入或修改
    define() {
      var url = "";
      var event = "";
      if (this.insertORedit === "insert") {
        url = this.basepage.url + "/insert";
        event = "insert-success";
        var user = JSON.parse(localStorage.user);
        this.basepage.formConf.formData["createBy"] = user.id;
        this.$parent.event("insert",this.basepage.formConf.formData );
      } else if (this.insertORedit === "edit") {
        url = this.basepage.url + "/updateById";
        event = "updateById-success";
        this.$parent.event("edit",this.basepage.formConf.formData );
      }
      this.COMMON.httpPost(
        this,
        url,
        this.basepage.formConf.formData,
        (result) => {
          if (result.result === "SUCCESS") {
            this.tableData = result.list;
            this.total = result.total;
            this.insertEditVisible = false;
            this.$parent.event(event, {});
            this.getPage();
          }
        },
        (result) => {}
      );
    },
    reset() {
      this.formConf.formData = {};
    },
    getSelection() {
      return this.$refs.table.selection;
    },
    // 改变选中行时操作
    handleCurrentChange(val) {
      this.currentRow = val;
    },
    select() {
      this.getPage();
    },
    resetSearch() {
      this.searchFormData = {
        pageOn: 1,
        pageSize: 10,
        total: 0,
        data: {},
      };
      this.getPage();
    },

    formatter(row, column, cellValue, index) {
      if(cellValue === null || cellValue === undefined){
        return "";
      }
      return this.$parent.formatter(cellValue, column.property, index);
    },
    formatterDetail(data, prop) {
      if(data === null || data === undefined){
        return "";
      }
      return this.$parent.formatter(data, prop, 0);
    },
    // table操作
    operation(row, event) {
      this.$parent.operation(row, event);
    },
    selectChange(type, pro) {
      this.$parent.selectChange(
        type,
        pro,
        this.basepage.formConf.formData[pro]
      );
    },
    /**
     * 获取当前选中行数据
     */
    getCurrentRow() {
      if (this.currentRow == undefined) {
        this.$message({
          message: "请先选中一行",
          type: "warning",
        });
      }
      return this.currentRow;
    },
  },
  mounted: function () {
    this.getPage(); //需要触发的函数
  },
};
</script>
<style>
.right {
  /* position: absolute; */
  right: 0px;
  width: 300px;
  padding: 10px;
}
</style>